iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
Modern Web

Google Apps Script 整合運用系列 第 7

GAS樣版引擎

  • 分享至 

  • xImage
  •  

GAS樣版引擎

HtmlService.createTemplateFromFile(file) 是 Google Apps Script 中用於創建 HTML 模板的方法,它的主要用途是將 HTML 文件中的動態數據嵌入到模板中,以生成動態的 HTML 內容,然後您可以將這個動態 HTML 用於 Web 應用程序、自定義對話框或電子郵件模板等。

以下是該方法的主要用途和工作原理:

  1. 創建 HTML 模板:首先,您需要創建一個包含您想要動態生成的 HTML 內容的 HTML 文件。這個 HTML 文件中可以包含占位符,例如 <?= dynamicData ?>,這些占位符將稍後被動態數據替換。
  2. 使用 HtmlService.createTemplateFromFile(file):通過調用 HtmlService.createTemplateFromFile(file),其中 file 是您的 HTML 文件的名稱(不包括副檔名),您可以將該 HTML 文件轉換為一個可編程的模板對象。
  3. 替換動態數據:一旦您有了模板對象,您可以使用 evaluate() 方法來替換模板中的占位符。例如,您可以使用 template.evaluate().setTitle('動態標題').setContent('動態內容') 來替換模板中的 <?= dynamicData ?> 占位符,將其替換為具體的內容。
  4. 生成最終的 HTML 內容:最後,您可以使用 getContent() 方法來獲得最終的動態生成的 HTML 內容。
  5. <? .... ?>:這標籤代表樣版引擎語法,可以將變數替代,也可以調用後台的函式
  6. <?= .... ?>:印出變數內容相當於 PHP 的 echo, 但內容屬性是「文字」
  7. <?!= .... ?>:如果內容是HTML語法,則須此方法
  8. 設定網頁標題
setTitle(title)
  1. 允許「應用程式」嵌入在其他網頁
setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
  1. 自動響應
addMetaTag('viewport', 'width=device-width, initial-scale=1')
  1. 子樣版
    將樣版與變數替換後,得到HTML語法
getContent()

這個方法對於動態生成和呈現 HTML 內容非常有用,特別是在 Google Apps Script 項目中,當您需要在網頁應用程序、自定義對話框、電子郵件通知等中使用動態 HTML 內容時。通過將靜態 HTML 文件與動態數據結合使用,您可以更靈活地生成自定義的用戶界面。

Bootstrap5

  1. 官網:https://getbootstrap.com/
  2. 中文參考網站:https://bootstrap5.hexschool.com/
  3. 範本
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>
  1. Bootstrap Icon
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

JQUERY

  1. 網站:https://jquery.com/
  2. 引入
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

index.html


<html>
  <head>
    <meta charset="utf-8">
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

    <!-- bootstrap icon -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

  </head>
  <body>
    <h2>樣板</h2>
  </body>
</html>

doGet


/*========================================
  doGet
=========================================*/
function doGet(e){
  // 主樣版 
  let tmp = HtmlService.createTemplateFromFile('index');

  return tmp.evaluate().setTitle('網站標題').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

Yes


上一篇
Web 服務&API 服務
下一篇
建立共用函式
系列文
Google Apps Script 整合運用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言